<template>
    <div>
        <Tabs :sticky="true" :border="false" background="#0DCDB5" color="#FFFFFF"
              title-active-color='#FFFFFF'
              title-inactive-color="#FFFFFF"
              @click="onTab"
              class="tabs">
            <Tab v-for="tabItem in tabList" :title="tabItem.title" :name="tabItem.name" :key="tabItem.id">
                <Search v-model="searchValue" placeholder="搜索" @search="onSearch"/>
                <List
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了~"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <div class="order-box" v-for="orderItem in orderList" :key="orderItem.smId"
                         @click="jumpPage(`orderInfo?orderId=${orderItem.smId}`)">
                        <div class="acea-row row-middle row-between">
                            <div class="acea-row row-middle">
                                <img :src="orderLeftIcon" alt="order-left-icon" class="order-left-icon">
                                <div class="order-title">{{orderItem.smOrderName || orderItem.poPname}}</div>
                            </div>
                            <img :src="arrowRight" alt="arrow-right" class="arrow-right">
                        </div>
                        <div class="order-name">{{orderItem.smActivityName || orderItem.poSmActivityName}}</div>
                        <div class="acea-row row-middle row-between">
                            <div class="order-time acea-row row-column row-column-between">
                                <div>开始时间：{{orderItem.smActivityStartDate || orderItem.sm_activity_start_date  | format}}</div>
                                <div>结束时间：{{orderItem.smActivityEndDate || orderItem.smActivityEndDate | format}}</div>
                            </div>
                            <Button :icon="btnIcon" color="#FF8D51" class="bottom-btn" size="small"
                                    @click.stop="onBtn(orderItem.smId,userInfo.umId)"
                                    v-if="name === 1">抢单
                            </Button>
                            <Button color="#F7F8FC" class="bottom-btn pass-btn" size="small" :disabled="true" v-else>已抢单
                            </Button>
                        </div>
                    </div>
                </List>
                <Empty description="暂无数据~" v-if="orderList.length === 0"/>
            </Tab>
        </Tabs>
    </div>
</template>

<script>
    import {Tab, Tabs, List, Button, Search,Empty, Toast} from 'vant';
    import {getGrabList, getRobOrder, getShootList} from "../api/public";
    import dayjs from "dayjs";
    import localStorage from "@utils/store/localStorage";
    import {mapGetters} from "vuex";

    const loadImg = name => require(`@/assets/images/${name}.png`)

    export default {
        name: "RobOrder",
        components: {
            Tab,
            Tabs,
            List,
            Button,
            Search,
            Empty
        },
        data() {
            return {
                tabList: [
                    {
                        id: 1,
                        title: '新订单',
                        name: 1,
                    },
                    {
                        id: 2,
                        title: '已抢单',
                        name: 2,
                    }
                ],
                loading: false,
                finished: false,
                orderLeftIcon: loadImg('order_left_icon'),
                arrowRight: loadImg('arrow-right'),
                btnIcon: loadImg('Lightning'),
                orderList: [],
                pageNo: 1,
                flag: false,
                name: 1,
                searchValue: '',
                creationId:localStorage.get('creationId')
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        mounted() {
            console.log(this.userInfo)
            this.init(1,null,this.creationId)
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            jumpPage(page) {
                this.$router.push(page)
            },
            init(pageNo,searchCondition,smCreationId) {
                getGrabList(pageNo,searchCondition,smCreationId).then(res => {
                    this.loading = true;
                    this.orderList.push.apply(this.orderList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                })
            },
            init1(pageNo, pumId,poIsOver,searchCondition,poCreationId) {
                getShootList(pageNo, pumId,poIsOver,searchCondition,poCreationId).then(res => {
                    this.loading = true;
                    this.orderList.push.apply(this.orderList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                })
            },
            onTab(name) {
                this.loading = false;
                this.finished = false;
                this.flag = false;
                this.name = name;
                this.orderList = [];
                this.pageNo = 1;
                if (this.name === 1) {
                    this.init(1,null,this.creationId);
                } else {
                    this.init1(1, this.userInfo.umId,null,null,this.creationId);
                }
            },
            onSearch(val){
                this.loading = false;
                this.finished = false;
                this.flag = false;
                this.orderList = [];
                this.pageNo = 1;
                if (this.name === 1){
                    this.init(1,val,this.creationId)
                }else {
                    this.init1(1,this.userInfo.umId,null,val,this.creationId)
                }
            },
            onLoad() {
                if (this.flag) {
                    this.pageNo++;
                    if (this.name === 1) {
                        this.init(this.pageNo)
                    } else {
                        this.init1(this.pageNo, this.userInfo.umId,null,this.searchValue,this.creationId)
                    }
                } else {
                    this.finished = true;
                }
            },
            onBtn(id, userId) {
                getRobOrder(id, userId).then(res => {
                    if (res.code) {
                        Toast('抢单成功');
                        this.orderList = [];
                        this.pageNo = 1;
                        this.init(1,null,this.creationId)
                    } else {
                        Toast(res.msg);
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .tabs {
        .order-box {
            margin: 15px auto;
            width: 355px;
            height: 150px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            padding: 20px;

            .order-left-icon {
                width: 15px;
                height: 15px;
            }

            .order-title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(66, 69, 95, 1);
                margin-left: 9px;
            }

            .arrow-right {
                width: 14px;
                height: 14px;
            }

            .order-name {
                font-size: 18px;
                font-weight: 500;
                color: rgba(66, 69, 95, 1);
                margin: 17px 0 10px;
            }

            .order-time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(163, 165, 177, 1);
                height: 40px;
            }

            .bottom-btn {
                width: 70px;
                height: 30px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1 !important;
            }
        }
    }
</style>
